<script setup lang="ts">
import WorksList from './components/WorksList/index.vue'
import WorksGrid from './components/WorksGrid/index.vue'
import EditPicture from './components/EditPicture/index.vue'
import EditVideo from './components/EditVideo/index.vue'
import EditMusic from './components/EditMusic/index.vue'
import EditFont from './components/EditFont/index.vue'
import EditTemplate from './components/EditTemplate/index.vue'
import Search from '@/components/Search/index.vue'
import SelfPagination from '@/components/SelfPagination/index.vue'
import { Menu, Operation } from '@element-plus/icons-vue'
import APIWorks from '@/api/works'
import type { GoodsType, GoodsListResult, GoodsListQuery } from '@/api/works/types'
import Exposure from '@/components/Exposure/index.vue'
import APIUploadMaterial from '@/api/upload-material'
import { ElMessageBox, ElMessage } from 'element-plus'
import { capitalizeFirstLetter } from '@/utils/index'

const activeName = shallowRef<GoodsType>('video')
const isView = shallowRef<boolean>(false)
const swithActive = shallowRef<1 | 2>(1)

function handleSearch() {
    getList()
}

const queryParams = ref<GoodsListQuery>({
    page: 1,
    limit: 8
})

const list = ref<GoodsListResult[]>()
const total = shallowRef<number>(0)
const loading = shallowRef<boolean>(false)
provide('list', list)
provide('loading', loading)
provide('swithActive', swithActive)

function getGoodsList() {
    loading.value = true
    APIWorks.getGoodsList(queryParams.value, activeName.value).then(({ data, total: count }) => {
        list.value = data
        total.value = count
    }).finally(() => {
        loading.value = false
    })
}

function getTransports() {
    loading.value = true
    APIWorks.getTransports(queryParams.value, activeName.value).then(({ data, total: count }) => {
        list.value = data
        total.value = count
    }).finally(() => {
        loading.value = false
    })
}

function getList() {
    if (swithActive.value == 1) {
        getGoodsList()
    }

    if (swithActive.value == 2) {
        getTransports()
    }
}

watch(swithActive, () => {
    queryParams.value = { page: 1, limit: 8 }
    getList()
}, { immediate: true })

watch(activeName, () => {
    queryParams.value = { page: 1, limit: 8 }
    getList()
})

const dialogVisible = shallowRef<boolean>(false)

const goodsInfo = ref<any>({})

function onExposure(row: any) {
    goodsInfo.value = row
    dialogVisible.value = true
}

function onDelete(row: any) {
    ElMessageBox.confirm(
        '是否删除该数据?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        if (row.type == 'video') {
            if (row.is_template == 1) {
                return APIUploadMaterial.deleteTemVideo(row.goods_id)
            } else {
                return APIUploadMaterial.delVideo(row.goods_id)
            }

        } else if (row.type == 'picture') {
            return APIUploadMaterial.deletePic(row.goods_id)
        } else if (row.type == 'music') {
            return APIUploadMaterial.deleteMusic(row.goods_id)
        } else if (row.type == 'font') {
            return APIUploadMaterial.deleteFont(row.goods_id)
        }
    }).then(() => {
        ElMessage.success('删除成功')
        getList()
    }).catch(() => {
        ElMessage.info('已取消')
    })

}

function onCancellation(row: any) {
    ElMessageBox.confirm(
        '是否取消搬运?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        const formData: any = {
            id: row.id,
            type: row.type
        }

        return APIWorks.cancelTrans(formData)
    }).then(() => {
        ElMessage.success('操作成功')
        getList()
    }).catch(() => {
        ElMessage.info('已取消')
    })
}

const dialogEditPictureVisible = shallowRef<boolean>(false)
const dialogEditVideoVisible = shallowRef<boolean>(false)
const dialogEditMusicVisible = shallowRef<boolean>(false)
const dialogEditFontVisible = shallowRef<boolean>(false)
const dialogEditTemplateVisible = shallowRef<boolean>(false)

const editRow = ref<any>({})

function onEdit(row: any) {
    editRow.value = row
    const type = editRow.value.type
    if (type == 'video' && (editRow.value?.is_template == 0 || !editRow.value?.is_template)) {
        dialogEditVideoVisible.value = true
    } else if (type == 'video' && editRow.value?.is_template == 1) {
        dialogEditTemplateVisible.value = true
    } else if (type == 'picture') {
        dialogEditPictureVisible.value = true
    } else if (type == 'music') {
        dialogEditMusicVisible.value = true
    } else if (type == 'font') {
        dialogEditFontVisible.value = true
    }
}

function handleGoFront(row: any) {
    window.open(`${import.meta.env.VITE_APP_WEB_URL}/${row.type}-details/${row.id}?categoryType=${capitalizeFirstLetter(row.type)}`)
}

</script>

<template>
    <div class="works">
        <Search v-model="queryParams.keyword" @on-btn-click="handleSearch" />
        <div class="works-title">
            <div class="switch" :class="{ 'swith-active': swithActive == 1 }" @click="swithActive = 1">
                <h2>我的作品</h2>
            </div>
            <div class="switch" :class="{ 'swith-active': swithActive == 2 }" @click="swithActive = 2">
                <h2>我的搬运</h2>
            </div>
        </div>
        <div class="tabs-icon">
            <el-tabs v-model="activeName" class="tabs">
                <el-tab-pane label="视频" name="video"></el-tab-pane>
                <el-tab-pane label="图片" name="picture"></el-tab-pane>
                <el-tab-pane label="音乐" name="music"></el-tab-pane>
                <el-tab-pane label="字体" name="font"></el-tab-pane>
            </el-tabs>
            <el-icon class="menu" color="#4095E5" size="22" @click="isView = !isView">
                <Menu v-show="isView" />
                <Operation v-show="!isView" />
            </el-icon>
        </div>
        <WorksList v-show="!isView" @on-exposure="onExposure" @on-delete="onDelete" @on-cancellation="onCancellation"
            @on-edit="onEdit" @go-front="handleGoFront" />
        <WorksGrid v-show="isView" @on-exposure="onExposure" @on-delete="onDelete" @on-cancellation="onCancellation"
            @on-edit="onEdit" />
        <SelfPagination style="margin-top: 50px;" :total="total" v-model:current-page="queryParams.page"
            :page-size="queryParams.limit" @get-list="getList" />
        <Exposure v-model="dialogVisible" :goods-info="goodsInfo" />
        <EditPicture v-model="dialogEditPictureVisible" :goods_id="editRow?.goods_id" @get-list="getList" />
        <EditVideo v-model="dialogEditVideoVisible" :goods_id="editRow?.goods_id" @get-list="getList" />
        <EditMusic v-model="dialogEditMusicVisible" :goods_id="editRow?.goods_id" @get-list="getList" />
        <EditFont v-model="dialogEditFontVisible" :goods_id="editRow?.goods_id" @get-list="getList" />
        <EditTemplate v-model="dialogEditTemplateVisible" :goods_id="editRow?.goods_id" @get-list="getList" />
    </div>
</template>

<style lang="scss" scoped>
.works {
    width: 99%;
    margin: 0 auto;

    .works-title {
        display: flex;
        align-items: center;
        gap: 0 20px;

        .switch {
            display: flex;
            align-items: center;
            gap: 0 10px;
            cursor: pointer;

            h2 {
                color: #BBBBBB;
                font-weight: 200;
                font-size: 20px;
                display: flex;
                align-items: center;

                &::before {
                    content: '';
                    display: block;
                    width: 5px;
                    height: 16px;
                    border-radius: 5px;
                    margin-right: 6px;
                    background-color: #BBBBBB;
                }
            }
        }

        .swith-active {
            h2 {
                color: #F91414;
                font-weight: 700;

                &::before {
                    content: '';
                    background-color: rgba(249, 20, 20, 1);
                }
            }
        }
    }

    .title {
        color: rgba(249, 20, 20, 1);
        font-size: 24px;
        font-weight: 700;
    }

    .tabs-icon {
        position: relative;

        .menu {
            border: none;
            cursor: pointer;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-90%);
        }

        .tabs {
            margin-top: 10px;

            &:deep(.el-tabs__item.is-active) {
                color: #F91414;
            }

            &:deep(.el-tabs__active-bar) {
                background-color: #F91414;
                height: 1px;
            }

            &:deep(.el-tabs__item) {
                &:hover {
                    color: #F91414;
                }
            }

            &:deep(.el-tabs__nav-wrap) {
                &:after {
                    height: 1px !important;
                }
            }
        }
    }
}
</style>
